<template>
    <section>
        <!--        添加框
        destroy-on-close
        -->
        <!--处理寻主信息-->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <!--
                ref:简单理解就是申明addForm表单的id
                :rules:定义校验规则
             -->
            <el-form ref="addForm"  :model="addForm" label-width="80px">
                <el-form-item label="用户">
                    <el-input v-model="addForm.username" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="宠物类型">
                    <el-input v-model="addForm.typeName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="成本价">
                    <el-input v-model="addForm.costprice" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="宠物名" prop="name">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="售价">
                    <el-input v-model="addForm.saleprice"></el-input>
                </el-form-item>
                <el-form-item prop="logo" label="宠物图片">
                    <el-upload
                            class="upload-demo"
                            action="/api/fastdfs/upload"
                            :on-remove="handleRemove"
                            :on-success="handleSuccess"
                            :file-list="fileList"
                            list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>

                <el-form-item label="支付方式" :label-width="formLabelWidth">
                    <el-select v-model="addForm.paytype"  placeholder="请选择来源">
                        <el-option label="垫付" value="1" ></el-option>
                        <el-option label="银行转账" value="2"></el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="宠物介绍">
                    <quill-editor :options="editorOption" v-model="addForm.intro">
                    </quill-editor>
                </el-form-item>
                <el-form-item label="领养须知">
                    <quill-editor :options="editorOption" v-model="addForm.adoptNotice">
                    </quill-editor>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm">取消</el-button>
                <el-button type="primary" @click="onSubmit">提交</el-button>
            </div>
        </el-dialog>

        <!--高级查询-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true">
                <el-form-item>
                    <el-input v-model="title1" placeholder="宠物信息"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" v-on:click="getUsers">查询</el-button>
                </el-form-item>

            </el-form>
        </el-col>
        <!--列表展示-->
        <el-table :data="pendinglist" highlight-current-row v-loading="listLoading"
                  style="width: 100%;">
            <el-table-column type="index" width="60"></el-table-column>
            <el-table-column prop="title" label="主题"></el-table-column>
            <el-table-column prop="name" label="宠物名"></el-table-column>
            <el-table-column prop="age" label="宠物年龄"></el-table-column>
            <el-table-column prop="gender" label="宠物性别">
                <template scope="scope">
                    <span style="color: green" v-if="scope.row.gender===1">公</span>
                    <span style="color: red" v-else-if="scope.row.gender===0">母</span>
                </template>
            </el-table-column>
            <el-table-column prop="coatColor" label="宠物毛色"></el-table-column>
            <el-table-column prop="type.name" label="宠物类型"></el-table-column>
            <el-table-column prop="price" label="宠物价格"></el-table-column>
            <el-table-column prop="address" label="收购地址"></el-table-column>
            <el-table-column prop="user.username" label="发布人">
                <template scope="scope">
                    <span>{{scope.row.user.username||scope.row.user.phone||scope.row.user.email}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">

                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">处理</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--工具条-->
        <el-col :span="24" class="toolbar">

            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize"
                           :total="total" style="float:right;">
            </el-pagination>
        </el-col>
    </section>
</template>

<script>
    /*富文本编辑器*/
    import {quillEditor} from "vue-quill-editor"; //调用编辑器
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    /*图片再富文本里面上传，返回上传的url*/
    import quillconfig from "../../common/quill-config"

    export default {
        /*暴露组件*/
        components: {
            quillEditor
        },
        data() {
            return {
                //引用的quill-config.js
                editorOption: quillconfig,
                addFormRules: {
                    //验证规则
                    name: [
                        {required: true, message: '请输入内容', trigger: 'blur'},
                        {min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur'}
                    ]
                },
                //高级查询字段
                title1: '',
                //弹出框的标题
                title: '',
                //列表展示
                pendinglist: [],
                //页面加载
                listLoading: '',
                currentPage: 1,
                pageSize: 5,
                total: 0,
                //dialog显示
                dialogFormVisible: false,
                addForm: {
                    id: "",
                    username: "",//用户名
                    typeName: "",//宠物类型
                    name: "",//宠物名
                    saleprice: "",//售价
                    costprice: "",//成本价
                    intro: "",//宠物介绍
                    adoptNotice: "",//领养须知
                    resources:"",//图片
                    paytype:"1"
                },
                addFormLabelWidth: '120px',
                fileList:[]
            }
        },
        methods: {
            handleSuccess(response, file, fileList) {
                console.log(fileList)
                //上传成功之后，给表单的resources设置
                for (let i = 0; i < fileList.length; i++) {
                    if (i == 0) {
                        this.addForm.resources = fileList[i].response.resultObj;
                    } else {
                        this.addForm.resources = this.addForm.resources + "," + fileList[i].response.resultObj
                    }
                }
            },
            handleRemove(file, fileList) {

            },
            //重置。点击取消
            resetForm(addForm) {
                // this.$refs[addForm].resetFields();
                this.dialogFormVisible = false
            },
            //提交
            onSubmit(addForm) {
                let petDetail = {intro: this.addForm.intro, adoptNotice: this.addForm.adoptNotice}
                this.addForm.detail = petDetail
                //下架
                // this.addForm.state = 0
                //应该还要把发布人的信息传过去
                this.$http.post("/searchMasterMsg/savePet", this.addForm).then((res) => {
                    if (res.data.success) {
                        this.dialogFormVisible = false;
                        this.$message({
                            message: '操作成功!',
                            type: 'success'
                        });
                        //重置表单
                        this.$refs['addForm'].resetFields();
                        this.loadData()
                    } else {
                        this.dialogFormVisible = false;
                        this.$message({
                            message: res.data.message,
                            type: 'error'
                        });
                    }
                });

            },
            //高级查询
            getUsers() {
                //跳转到第一页查询
                this.currentPage = 1
                this.loadData()
            },
            //修改
            handleEdit: function (index, row) {
                this.dialogFormVisible = true;
                //清空图片
                this.fileList = [];
                //修改标题
                this.title = "处理寻主信息";
                console.log(row,index);
                //回显用户名
                this.addForm.username = row.user.username||row.user.phone||row.user.email;
                //回显宠物类型
                this.addForm.typeName = row.type.name;
                //回显宠物名
                this.addForm.name = row.name;
                //回显成本价
                this.addForm.costprice = row.price;
                //图片回显
                if (row.resources) {
                    //分割
                    let split = row.resources.split(",");
                    for (let i = 0; i < split.length; i++) {
                        //存放到回显图片的集合中
                        this.fileList.push({"url": "http://121.37.194.36" + split[i]})

                    }
                }
                //数据库的寻主信息当前id
                this.addForm.adopt_id=row.id
                //typeid
                this.addForm.type_id=row.type.id
                //把发布信息的门户用户传过去
                this.addForm.user=row.user
            },

            //加载数据
            loadData() {
                let params = {
                    localPage: this.currentPage, //加载默认参数
                    pageSize: this.pageSize,
                    title: this.title1,
                    state: 0
                }
                //请求地址  then请求成功  catch请求失败
                this.$http.post("/searchMasterMsg/pending", params).then(res => {
                    let {data, totals} = res.data; //解构
                    this.pendinglist = data;
                    this.total = totals;
                }).catch()
            },
            //点击分页,更改当前页
            handleCurrentChange(val) {
                // console.log(val)
                this.currentPage = val;
                this.loadData()
            },
        },
        mounted() {
            //加载完毕之后执行
            this.loadData()
        }
    }
</script>

<style scoped>

</style>